let getRandom = function(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
};
import {Game} from './Niubi'
//游戏最开始的定义
let canvas = document.getElementById("myGame");
let game = new Game(1200, 600, canvas, { preload: preload, create: create, update: update, render: render });
window.game = game;
//游戏资源（如图片）的加载
function preload() {
    game.load.image('bird', './img/bird.png')
        .image('man', './img/man/man_ID.png', 10)
        .image('manWhite', './img/man_white/man_ID.png', 10)
        .image('bat', './img/bat/bat_ID.png', 8);
}

var man;
var bat;
var bird;
var road = [];
game.init();
game.start();

//场景、角色等的创建
function create() {
    //添加图片诠释角色
    bat = game.add.sprite({
        x: 0,
        y: 100,
        image: this.bat,
        w: 50,
        h: 50
    });
    bat.movement = true;//是否图片需要切换
    bat.speedX = 1;

    man = game.add.sprite({
        x: 400,
        y: 400,
        color: 'black',
        image: this.man,
        w: 80,
        h: 80
    });
    man.movement = true;

    for(let i = 0; i < 4; i++){
        road[i] = game.add.building({
            x: 350*i,
            y: 470,
            color: Math.random() > 0.5 ? "black" : "white",
            speedX: -4,
            draw: function(ctx){
                ctx.save();
                ctx.beginPath();
                ctx.fillStyle = this.color;/*设置填充颜色*/
                ctx.strokeStyle = this.color;
                ctx.arc(this.x, this.y + 5, 5, 0, 2*Math.PI);
                ctx.arc(this.x + 200, this.y + 5, 5, 0, 2*Math.PI);
                ctx.fill();
                ctx.fillRect(this.x, this.y, 200, 10);/*绘制一个矩形，前两个参数决定开始位置，后两个分别是矩形的宽和高*/
                ctx.closePath();/*可选步骤，关闭绘制的路径*/
                ctx.stroke();
                ctx.restore();
            }
        });
    }
}

function update () {
    //game.addSprite(200, 100, "imgBird");
}

//游戏内各种判断
function render () {
    //蝙蝠变大
    if(bat.w < 200){
        bat.w = ++bat.h;
    }
    //蝙蝠循环出现
    if(bat.x > 1400){
        bat.x = -50;
        bat.w = bat.h = 50;
    }
    //角色死亡
    if(man.y > 600 || man.y < 0){
        man.inWorld = false;
        man.alive = false;
    }
    //debug helper
    if(!man.alive){
        game.stop();
        console.log("game over!")
    }

    //判断是否落在了桥上----------如果颜色不匹配，即使落在了桥上也是false
    var onRoad = false;
    var roadColor = "";
    for(var i = 0; i < 4; i++){
        var a = road[i].y - man.y;
        if(road[i].x < (man.x + man.w) && man.x < (road[i].x + 200) && 50 <= a && a < 80 && road[i].color == man.color){
            onRoad = true;
            roadColor = road[i].color;
            if(roadColor == "white"){
                this.score += 200;
            }else{
                this.score += 100;
            }
        }else{
            //console.log("未跳在桥上");
        }
    }
    if(onKeyDown){//按下跳跃键
        if(!jump) {//如果不是跳跃状态
            //跳跃状态为真，获得向上的爆发速度，向右的速度，和向上的加速度
            jump = true;
            man.speedY = -4;
            man.gravity = -0.04;
            man.speedX = 1;
        }
    }else{
        if(onRoad){//在桥上，人物停止，不是跳跃状态
            jump = false;
            man.gravity = 0;
            man.speedY = 0;
            //if(roadColor == "white"){
            //    man.speedX = 1;
            //}else{
            //    man.speedX = -1;
            //}
            man.speedX = -3;
        }else{//不在桥上，获得向下的加速度，向右的速度
            man.gravity = 0.2;
            man.speedX = 1;
        }
    }

    //桥的循环，新生成的桥高度随机，颜色随机
    if(road[0].x < -200){
        road[0].x = 1200;
        road[0].y = getRandom(400, 500);
        road[0].color = Math.random() > 0.5 ? "black" : "white";
        var first = road.shift();
        road.push(first);
    }
}
var onKeyDown = false;
var jump = false;
function getEle(name){
    return document.getElementsByClassName(name)[0];
}
var hint = getEle("hint");
var eleRestart = getEle("restart");
var gameplay = getEle("gameplay");
eleRestart.onclick = function(){
    game.restart();
};
gameplay.onclick = function(){
    game.gamePlay = true;
    game.restart();
};
window.document.onkeydown = function(keyEvent){
    keyEvent = keyEvent ? keyEvent : window.event;
    //keyEvent.which = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
    if(keyEvent.which == 13){
        onKeyDown = true;
    }else if(keyEvent.which == 32){
        if(man.color == "black"){
            man.image = game.manWhite;
            man.color = "white";
        }else{
            man.image = game.man;
            man.color = "black";
        }
    }
};
window.document.onkeyup = function(keyEvent){
    keyEvent = keyEvent ? keyEvent : window.event;
    //keyEvent.which = keyEvent.which ? keyEvent.which : keyEvent.keyCode;
    if(keyEvent.which == 13){
        //man.speedY = -1;
        //man.gravity = 0.01;
        onKeyDown = false;

    }
};